<template>
  <el-form
    ref="ruleFormRef"
    :model="slForm"
    :rules="rules"
    class="demo-ruleForm"
    label-position="right"
    size="small"
  >
    <el-form-item
      :label="t('ptl.direction')"
      prop="direction"
      :placeholder="t('ptl.direction')"
    >
      <el-radio-group v-model="slForm.direction">
        <el-tooltip content="Send">
          <el-radio label=">">
            >
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Response">
          <el-radio label="<">
            &lt;
          </el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      :label="t('ptl.address')"
      prop="address"
      :placeholder="t('ptl.address')"
      @keyup.enter="submitForm(ruleFormRef)"
    >
      <el-input v-model="slForm.address" />
    </el-form-item>

    <el-form-item
      :label="t('ptl.r')"
      prop="r"
      :placeholder="t('ptl.r')"
    >
      <el-input v-model="slForm.r" />
    </el-form-item>

    <el-form-item
      :label="t('ptl.g')"
      prop="g"
      :placeholder="t('ptl.g')"
    >
      <el-input v-model="slForm.g" />
    </el-form-item>

    <el-form-item
      :label="t('ptl.b')"
      prop="b"
      :placeholder="t('ptl.b')"
    >
      <el-input v-model="slForm.b" />
    </el-form-item>

    <el-form-item
      :label="t('ptl.isButtonFlash')"
      prop="isButtonFlash"
      :placeholder="t('ptl.isButtonFlash')"
    >
      <el-radio-group v-model="slForm.isButtonFlash">
        <el-tooltip content="Flashing disabled">
          <el-radio label="N">
            N
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Flashing enabled">
          <el-radio label="F">
            F
          </el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      :label="t('ptl.isTextFlash')"
      prop="isTextFlash"
      :placeholder="t('ptl.isTextFlash')"
    >
      <el-radio-group v-model="slForm.isTextFlash">
        <el-tooltip content="Flashing disabled">
          <el-radio label="N">
            N
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Flashing enabled">
          <el-radio label="F">
            F
          </el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      :label="t('ptl.isBuzzer')"
      prop="isBuzzer"
      :placeholder="t('ptl.isBuzzer')"
    >
      <el-radio-group v-model="slForm.isBuzzer">
        <el-tooltip content="no sound">
          <el-radio label="N">
            N
          </el-radio>
        </el-tooltip>
        <el-tooltip content="buzz with intervals">
          <el-radio label="B">
            B
          </el-radio>
        </el-tooltip>
        <el-tooltip content="buzz continuously">
          <el-radio label="C">
            C
          </el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      :label="t('ptl.comfirmBehaves')"
      prop="comfirmBehaves"
      :placeholder="t('ptl.comfirmBehaves')"
    >
      <el-radio-group v-model="slForm.comfirmBehaves">
        <el-tooltip content="start flashing the value on the display, and send a KP message">
          <el-radio label="H">
            H
          </el-radio>
        </el-tooltip>
        <el-tooltip content="no special behaviour required, just send a KP message">
          <el-radio label="N">
            N
          </el-radio>
        </el-tooltip>
        <el-tooltip content="ignore any key presses, basically the button acts as if it has been disabled. No KP are sent">
          <el-radio label="D">
            D
          </el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      :label="t('ptl.isEnableMenu')"
      prop="isEnableMenu"
      :placeholder="t('ptl.isEnableMenu')"
    >
      <el-radio-group v-model="slForm.isEnableMenu">
        <el-tooltip content="Menu button is enabled">
          <el-radio label="E">
            E
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Menu button is disabled">
          <el-radio label="D">
            D
          </el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      :label="t('ptl.menuBehaves')"
      prop="menuBehaves"
      :placeholder="t('ptl.menuBehaves')"
    >
      <el-radio-group v-model="slForm.menuBehaves">
        <el-tooltip content="reset display value to 1st item in list">
          <el-radio label="H">
            H
          </el-radio>
        </el-tooltip>
        <el-tooltip content="send KP message">
          <el-radio label="N">
            N
          </el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      :label="t('ptl.externalOutput1')"
      prop="externalOutput1"
      :placeholder="t('ptl.externalOutput1')"
    >
      <el-radio-group v-model="slForm.externalOutput1">
        <el-tooltip content="Not enabled">
          <el-radio label="N">
            N
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Enabled">
          <el-radio label="E">
            E
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Enabled with interval">
          <el-radio label="I">
            I
          </el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      :label="t('ptl.externalOutput2')"
      prop="externalOutput2"
      :placeholder="t('ptl.externalOutput2')"
    >
      <el-radio-group v-model="slForm.externalOutput2">
        <el-tooltip content="Not enabled">
          <el-radio label="N">
            N
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Enabled">
          <el-radio label="E">
            E
          </el-radio>
        </el-tooltip>
        <el-tooltip content="Enabled with interval">
          <el-radio label="I">
            I
          </el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      :label="t('ptl.data')"
      prop="data"
      :placeholder="t('ptl.data')"
      @keyup.enter="submitForm(ruleFormRef)"
    >
      <el-input v-model="slForm.data" />
    </el-form-item>

    <el-form-item>
      <el-button
        type="primary"
        @click="submitForm(ruleFormRef)"
        :disabled="!ptlClientStatus"
        :loading="loading"
      >
        {{ t('ptl.send') }}
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">
        {{ t('ptl.reset') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { sendMessageByClient } from '@/api/ptl'
import { ptlStore } from '@/store/ptlStore'
import { storeToRefs } from 'pinia'
import { AtMessage } from '@/types/ptl/AT'
import { SlMessage } from '@/types/ptl/SL'

const store = ptlStore()

const loading = ref(false)

const { ptlClientStatus } = storeToRefs(store) // 连接状态

const { t } = useI18n()
const ruleFormRef = ref<FormInstance>()

const slForm: SlMessage = reactive({
  direction: '>',
  address: '*******',
  messageType: '',
  r: '00',
  g: '00',
  b: '00',
  isButtonFlash: 'N',
  isTextFlash: 'N',
  isBuzzer: 'N',
  comfirmBehaves: 'N',
  isEnableMenu: 'E',
  menuBehaves: 'N',
  externalOutput1: 'N',
  externalOutput2: 'N',
  data: ''
})

const rules = reactive<FormRules>({
  direction: [
    {
      required: true,
      message: '请填写发送方向',
      trigger: 'blur',
    },
  ],
  address: [
    {
      required: true,
      message: '请填写目标地址',
      trigger: 'blur',
    },
    { min: 7, max: 7, message: '长度必须是7', trigger: 'blur' }
  ],
  r: [
    {
      required: true,
      message: '请填写R',
      trigger: 'blur',
    },
  ],
  g: [
    {
      required: true,
      message: '请填写G',
      trigger: 'blur',
    },
  ],
  b: [
    {
      required: true,
      message: '请填写B',
      trigger: 'blur',
    },
  ],
  data: [
    {
      required: true,
      message: '请填写显示的值',
      trigger: 'blur',
    },
  ]
})

/**
 * 提交表单
 * @param formEl
 */
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return

  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true

      if (slForm.direction === '>') {
        slForm.messageType = 'SL'
      } else {
        slForm.messageType = 'sl'
      }

      sendMessageByClient(slForm)
        .then((res) => {
          ElMessage({
            showClose: true,
            message: res.data.message,
            type: 'success',
            duration: 1000,
          })
        })
        .finally(() => {
          loading.value = false
        })
    }
  })
}

/**
 * 重置表单
 * @param formEl
 */
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>
